

        header{
            position: fixed;
            width: 100%;
            top: 0px;
            left: 0px;
        }
        header nav>a img{
            display: block;
        }
        header nav>a .base{
            display: none;
        }
        header nav ul li a{
            color: #fff;
        }
        header nav ul li:last-child a .txt img{
            display: block;
        }
        header nav ul li:last-child a .txt img.base{
            display: none;
        }
        header nav .btn span{
            background: #fff;
        }
        header nav .btn::after{
            background: rgba(255,255,255,.2);
        }

        .container{
            position: fixed;
            width: 100%;
            height: 100vh;
            top: 0px;
            left: 0px;
        }
        html{
            position: fixed;
            top: 0px;
            left: 0px;
        }
        main{
            position: relative;
            height: 100%;
            z-index: 1;
        }
        main>*,
        main>*>*,
        main .index .opacityPic>*{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        main .index>*{
            overflow: hidden;
        }
        
        main .index .opacityPic .palace img{
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;
            animation:imageAnimation 18s linear infinite 0s;
        }
        
        @keyframes imageAnimation{
            0%{opacity:0;transform: scale(1);}
            11%{opacity:1;transform:scale(1.03)}
            34%{opacity:1;transform:scale(1.097)}
            45%{opacity:0;transform:scale(1.128)}
            46%{opacity: 0;transform: scale(1);}
            100%{opacity:0;transform: scale(1);}
        }
        
        main .index .opacityPic .palace img:nth-child(2){
            animation-delay: 6s;
        }
        main .index .opacityPic .palace img:nth-child(3){
            animation-delay: 12s;
        }
        main .index .opacityPic .palace img:nth-child(4){
            animation-delay: 18s;
        }
        main .index .opacityPic .palace img:nth-child(5){
            animation-delay: 24s;
        }
        main .index .opacityPic .shadow{
            background: #000;
            opacity: .2;
            z-index: 2;
        }
        main .index .opacityPic h1{
            position: absolute;
            top: initial;
            font-weight: normal;
            bottom: 30px;
            height: 26vw;
            line-height: 26vw;
            font-size: 32.7vw;
            color: #fa6a00;
            width: 117%;
            left: -6%;
            transform: translateY(-20px);
            transition: transform 1s cubic-bezier(.645,.045,.355,1),opacity .8s ease;
        }
        main .index .opacityPic h1.over{
            transform: translateY(0px);
            transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity .8s ease;
        }

        main .index .content{
            z-index: 2;
        }
        main .index .content .line,
        main .index .content .round{
            position: absolute;
            left: calc(-12.5vw - 10px);
        }
        
        main .index .content .line{
            height: 1px;
            width: 12.5vw;
            transform-origin: left center;
            background: #fff;
            top:calc(50% - (2.7vw * 1.28 * 2 + 72px + 18px * 3.6) / 2 - 30px + 1.5vw);
        }
        main .index .content .round{
            width: 10px;
            height: 10px;
            top:calc(50% - (2.7vw * 1.28 * 2 + 72px + 18px * 3.6) / 2 - 30px + 1.5vw - 5px);
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translate3d(12.5vw,0,0);
        }
        main .index .content .txt{
            width: 50%;
            position: relative;
            top: -30px;
            left: 12.47%;
            min-width: 550px;
            color: #fff;
        }
        main .index .content .txt h2{
            font-weight: 900;
            font-size: 2.7vw;
            line-height: 1.28;
            margin-bottom: 72px;
        }
        main .index .content .txt a{
            line-height: 3.6;
            padding: 0px 30px;
            position: relative;
            display: inline-block;
            font-size: 18px;
        }
        main .index .content .txt a i{
            position: absolute;
            transition: all .35s cubic-bezier(.215,.61,.355,1);
            margin: auto;
            background: #fff;
        }
        main .index .content .txt a .horizontal{
            height: 2px;
            left: 0px;
            right: 0px;
        }
        main .index .content .txt a .vertical{
            width: 2px;
            top: 0px;
            bottom: 0px;
        }
        main .index .content .txt a .tp{
            top: 0px;
        }
        main .index .content .txt a .rht{
            right: 0px;
        }
        main .index .content .txt a .btm{
            bottom: 0px;
        }
        main .index .content .txt a .lft{
            left: 0px;
        }
        main .index .content .txt a:hover .tp{
            transform: scaleX(1.1) translateY(2px);
        }
        main .index .content .txt a:hover .rht{
            transform: scaleY(1.1) translateX(-2px);
        }
        main .index .content .txt a:hover .btm{
            transform: scaleX(1.1) translateY(-2px);
        }
        main .index .content .txt a:hover .lft{
            transform: scaleY(1.1) translateX(2px);
        }
        main .index .content .footage{
            bottom: 60px;
            height: 80px;
            color: #fa6a00;
            position: fixed;
            width: 100%;
            left: 0px;
            z-index: 31;
        }
        main .index .content .footage .box{
            height: 100%;
            position: relative;
        }
        main .index .content .footage .box .item{
            justify-content: space-between;
            height: 100%;
            transition:transform .8s cubic-bezier(.215,.61,.355,1);
        }
        main .index .content .footage .box .item p{
            font-size: 18px;
            margin-left: 12.47%;
            line-height: 80px;
            color: #8c8c8c;
        }
        main .index .content .footage .box:hover .item p{
            color: #fa6a00;
        }
        main .index .content .footage .box .item p img{
            margin-right: 15px;
        }
        main .index .content .footage .box .item a{
            font-size: 14px;
            width: 200px;
            position: relative;
        }
        main .index .content .footage .box .item a::before{
            content: "";
            display: block;
            width: 1px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
            background: #dedede;
        }
        main .index .content .footage .box .item a span{
            margin-right: 75px;
        }
        main .index .content .footage .box .color{
            background:#fff;
            z-index: -1;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            transition: .7s cubic-bezier(.215,.61,.355,1);
        }
        main .index .content .footage .box .color,
        main .index .content .footage .box .item{
            transform: translateY(calc(100% - 14px));
        }
        main .index .content .footage .box.over .color,
        main .index .content .footage .box.over .item{
            transform: translateY(0px);
        }
        main .index .content .footage .box.over .item{
            transition: transform .9s cubic-bezier(.645,.045,.355,1);
        }
        
        footer{
            position: fixed;
            width: 100%;
            left: 0px;
            bottom: 0px;
            z-index: 2;
        }


        @media(max-width:960px){
            main .index .content .txt{
                width: 75%;
                min-width: initial;
            }
            main .index .content .txt h2{
                font-size: 4vw;
            }
            main .index .content .txt a{
                font-size: 15px;
                /*line-height: 3.4;
                padding: 0px 25px;*/
            }
        }
        @media(max-width:767px){
            .first main .index .content.frozen .line,
            .first main .index .content.frozen .round,
            .start main .index .content.frozen .line,
            .start main .index .content.frozen .round{
                left: -6%;
            }
            main .index .content .line{
                top:calc(50% - (4.9vw * 1.58 * 2 + 10vw + 15px * 3.6) / 2 - 7vw + 5vw);
            }
            main .index .content .round{
                top:calc(50% - (4.9vw * 1.58 * 2 + 10vw + 15px * 3.6) / 2 - 7vw + 5vw - 5px);
            }
            main .index .content .txt{
                top:-7vw;
                left: 7%;
                width: 93%;
            }
            main .index .content .txt h2{
                margin-bottom: 10vw;
                font-size: 4.9vw;
                line-height: 1.58;
            }
            /*main .index .content .txt a{
                line-height: 3.2;
                font-size: 12px;
            }*/
            main .index .opacityPic h1{
                width: 450%;
                left: -20%;
                font-size: 90vw;
                height: 70vw;
                line-height: 70vw;
            }
            
            main .index .content .footage .box .item p{
                width: 75.2%;
                margin: 0 auto;
                position: relative;
                line-height: 1.8;
            }
            main .index .content .footage .box .item p img{
                position: absolute;
                left: -11%;
                top: calc(18px * 1.8 / 2);
                transform: translateY(-50%);
            }
            main .index .content .footage .box .item a{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 100%;
                top: 0px;
            }
            main .index .content .footage .box .item a::before,
            main .index .content .footage .box .item a *{
                display: none;
            }
        }
        
        main .index .opacityPic .palace{
            transition: transform ease-in-out 1.2s 2.5s;
            transform: scale(1.3);
        }
        .start main .index .opacityPic .palace,
        .first main .index .opacityPic .palace{
            transform:scale(1);
        }
        .start main .index .opacityPic .palace{
            transition-delay: .4s;
        }
        .beginning.btm.first{
            left: 4.62vw;
            right: 4.62vw;
            height: 140px;
            animation: opacity .4s 3.5s ease forwards;
        }
        
        .leaving.rht{
            top: 0px;
            left: 0px;
            transition-delay: .3s;
        }
        .leaving.btm{
            width: initial;
            top: 0px;
            left: 0px;
            right: 0px;
            z-index: 19;
        }
        .leaving.rht.disappear{
            left: 100%;
        }
        .leaving.btm.disappear{
            top: calc(100vh - 74px);
            left: 4.62vw;
            right: 4.62vw;
            animation: opacity .4s 1.5s ease forwards;
        }
        .leaving.btm.disappear.over{
            top: calc(100vh - 140px);
        }
        .leaving.rht.jump{
            left: 0px;
            transition-delay: initial;
        }
        .leaving.btm.jump{
            top: 0px !important;
            left: 0px;
            right: 0px;
            animation: recoverOpacity .4s ease forwards;
            transition-delay: .3s;
        }
        main .index .content .line{
            transition-property: top ,left !important;
        }
        .first main .index .content.ready .line,
        .first main .index .content.ready .round{
            transition: 1.4s cubic-bezier(.645,.045,.355,1),left ease-in-out 1.2s 3.5s;
        }

        main .index .content.ready .line,
        main .index .content.ready .round{
            transition: 1.4s cubic-bezier(.645,.045,.355,1),left ease-in-out 1.2s 1s;
        }
        main .index .content.frozen .line,
        main .index .content.frozen .round{
            left: 0px;
        }
        